<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>以圆形显示鼠标单击位置</title>
		<style type="text/css">
			#yuan {
				height: 30px;
				width: 30px;
				background: yellow;
				border-radius: 50%;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="yuan">

		</div>
		<script type="text/javascript">
			var yuan=document.getElementById('yuan')
			document.onclick=function(){
				var x=event.pageX;
				var y=event.pageY;
				
				x=x-yuan.offsetWidth/2;
				y=y-yuan.offsetWidth/2;
				
				yuan.style.left=x+'px';
				yuan.style.top=y+'px'
			}
		</script>
		
	</body>

</html>